@import '_variables.scss';
@import '_icon_font.scss';


html{

   position: relative;
   height: 100%;
}
body {
	position: relative;
    height: 100%;
    background: $dard-bgColor;
    font-family: Arial,Baskerville,  Helvetica Neue, Helvetica,  sans-serif;
    font-size: 14px;
    color:$base-color;
    margin: 0;
    padding: 0;
}
a{
	&:link,&:visited,&:hover{
		text-decoration:none;
	}
}
.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 14px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.swiper-pagination-bullet{
	background:$base-color;
	opacity:1;
}
.swiper-pagination-bullet-active{
	background:$brand-color;
}

#profile{
	background-image: url(../images/circle.svg);
	background-position:50% 30%;
	background-repeat:no-repeat;

    background-size:60% auto;
}

figure{
	text-transform: Capitalize;
	img{
		width:80px;
		height:80px;
		height: 80px;
	    border-radius: 50%;
	    border: 5px solid $base-color/1.4;
	}
	h2{
		font-family:"Impact";
		letter-spacing:1px;
		word-spacing:.5rem;
		padding:5px;
		margin:5px;
		color: $gray-color;
		border-bottom:1px solid $brand-color;
		display:inline-block;
		font-size:1.2rem;
		span{
			color:$brand-color;
		}
		

		&+p{
			font-family:"Bodoni";
			font-style:italic;
			margin:0px;
			color: $gray-color/1.5;
			font-size:1rem;
		}
	}
	

}

#info-mini{
	text-align:left;
	margin-top:3rem;
	padding-left:2rem;
}
ul{
	list-style:none;
	margin:0;
	padding:0;
	//font-family:Arial;
}

li{
	line-height:2rem;

	.icon{
		margin-right:1rem;
		color:$base-color/1.4;
	}
}


#info-page{

	$base-font-size:14px;
	padding-left:1rem;
	

	li{

        $icon-radius:24px;
        font-size:$base-font-size;

		text-align:left;
		border-left:1px solid $icon-circle-bgColor;
		
		.icon{
			width: $icon-radius;
		    height: $icon-radius;
		    background: $icon-circle-bgColor;
		    display: inline-block;
		    line-height:$icon-radius;
		    text-align: center;
		    //transform: translateX(-50%);
		    border-radius:50%;
		    margin-left:-13px;

		}

		&:first-child{
			padding-top:0;
			padding-bottom:2rem;
		}
		&:last-child{
			padding-bottom:0;
			p{
				//max-width:10rem;
				line-height:1rem;
				color:$base-color/1.3;
				margin-top:25px;
			}
		}

		#qr-code{
			display:inline-block;
			padding:5px;
			//background: $icon-circle-bgColor;

			
			canvas{ 
				background:$dard-bgColor * 2;
				padding:4px;
				width: 40px !important;
		    	height: 40px !important;
		    	border-radius: 0;
		    	border-color:$icon-circle-bgColor;
		    	margin-left:-30px;
		    	border-width:4px;
		    	margin-bottom:-50px;
			}
			
			
			

		}
	}


	figure{
		$photo-width:60px;

		display:flex;
		margin:0;
		img{
			width:$photo-width;
			height:$photo-width;
			//transform: translateX(-50%);
			margin-left:-35px;
		}
	}
	figcaption{
		text-align: left;
    	margin-left: 12px;
    	margin-top:5px;
	}

	h2{
		padding:0;
		margin:0;
	}
	p{
		line-height:1.8rem;
		font-style:normal;
	}
}

#company{
	display:block;
	figure{
		img{
			border-radius:0;
			max-width:150px;
			width:auto;
			height:auto;
			border:0;
		}

		p{
			text-align: center;
    		line-height: 2rem;
    		font-size: 1.2rem;
    		margin:0;
		}
	}

	
}

#content-wrapper{
	padding:0 1rem;
	text-align:left;
}

#mask{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	bottom:0;
	background:rgba(0, 0 ,0, .8);
	width:100%;
	height:100%;
	z-index:100;

	img{
		background:#FFF;
		padding:10px;
		margin-left:50%;
		margin-top:50%;
		transform:translateX(-50%) translateY(-50%);
	}

	
}
#note{
	text-align:center;
	margin-top:-60px;

	p{
		color:#4b4552;
	}
}

.hidden{
	display:none !important;
}


#social{
	margin-top:3rem;
	ul{
		display: flex;
		justify-content:center;
	}

	a{
		.icon{
			color:$brand-color;
			display:inline-block;
			border:1px solid $brand-color;
			width: 30px;
            border-radius: 50%;
            margin: 1rem;

		}
		
	}
	
}


